<template>
	<view class="container">
		<phone-header class="bg-shadow"
			:isrightHide=true
			title="填写订单"
			titleColor="#fff"
			bgColor="#4CCCD5"
			titleFontWeight="none"
			@tapRight="tapRight"
			@tapLeft="tapLeft"
		></phone-header>
		<view class="content">
			<!-- 表单内容 -->
			<view class="content-from bg-fff bg-shadow">
				<view class="input-item">
					<view class="input-item-left important">
						<text>联系人：</text>
					</view>
					<input type="text" focus placeholder="请输入用户名" />
				</view>
				<view class="input-item">
					<view class="input-item-left important">
						<text>联系方式：</text>
					</view>
					<input type="text" placeholder="请输入联系方式" />
				</view>
				<view class="input-item">
					<view class="input-item-left important">
						<text>验证码：</text>
					</view>
					<input type="text" maxlength="6" placeholder="输入手机验证码" />
					<view class="input-code">
						<text>点击获取验证码</text>
					</view>
				</view>
				<view class="input-item">
					<view class="input-item-left important">
						<text>维修方式：</text>
					</view>
					<view class="select">
						<picker @change="repairChangeFun" :value="repaicIndex" :range="repairArr">
								<view class="uni-input">{{repairArr[repaicIndex]}}</view>
						</picker>
						<text class="iconfont icon-xiala"></text>
					</view>
				</view>
				<view class="input-item">
					<view class="input-item-left">
						<text>手机类型：</text>
					</view>
					<view class="select">
						<picker @change="phoneClassChangeFun" :value="phoneClassIndex" :range="phoneClassArr">
								<view class="uni-input">{{phoneClassArr[phoneClassIndex]}}</view>
						</picker>
						<text class="iconfont icon-xiala"></text>
					</view>
				</view>
				<view class="input-item">
					<view class="input-item-left">
						<text>故障类型：</text>
					</view>
					<view class="select">
						<picker @change="faultChangeFun" :value="faultIndex" :range="faultArr">
								<view class="uni-input">{{faultArr[faultIndex]}}</view>
						</picker>	
						<text class="iconfont icon-xiala"></text>
					</view>
				</view>
				<view class="input-item">
					<view class="input-item-left important">
						<text>所在地址：</text>
					</view>
					<view class="address" @tap="addressFun">
						<text>{{ address }}</text>
						<text class="iconfont icon-dingwei"></text>
					</view>
				</view>
				<view class="big-input">
					<textarea placeholder-style="color:#666" placeholder="详细地址"/>
				</view>
				<view class="big-input">
					<textarea placeholder-style="color:#666" placeholder="备注"/>
				</view>
				<view class="input-item" style="justify-content: space-between;">
					<view>
						<text>设置为默认地址</text>
					</view>
					<view :class="[selection ? 'icon-xuanzhong' : 'icon-weixuanzhong', 'iconfont', {'icon-gree': selection}]" @tap="selectionFun"></view>
				</view>
			</view>
			<!-- 表单提交 -->
			<view class="content-sub">
				<view class="tip">
					<text>*为必填项</text>
				</view>
				<view class="btn">
					<button type="primary">提交订单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import phoneHeader from '../../components/phone-header/phone-header.vue'
	
	export default {
		data() {
			return {
				selection: false,
				address: "广东省-深圳市-福田区",
				repaicIndex: 0,
				repairArr: ['上门维修', '到店维修', '邮寄维修'],
				phoneClassIndex: 0,
				phoneClassArr: ['请选择', '苹果', '魅族', '小米', '华为', '一加'],
				faultIndex: 0,
				faultArr: ['请选择', '摄像头', '主板']
			}
		},
		methods: {
			repairChangeFun(e) {
				this.repaicIndex = e.target.value
			},
			phoneClassChangeFun(e) {
				this.phoneClassIndex = e.target.value
			},
			faultChangeFun(e) {
				this.faultIndex = e.target.value
			},
			addressFun() {
				uni.showToast({
					title: '城市定位',
					mask: false,
					duration: 1500
				});
			},
			selectionFun() {
				this.selection = !this.selection
			}
		},
		components: {
			phoneHeader
		}
	}
</script>

<style lang="scss">
	@import '../../static/iconfont/iconfont.css';
	.content-from {
		width: 100%;
		.input-item {
			display: flex;
			align-items: center;
			padding: 0 50upx;
			height: 100upx;
			line-height: 100upx;
			border-bottom: 1px solid #e6e6e6;
			.icon-weixuanzhong, .icon-xuanzhong {
				font-size: 40upx;
			}
			.icon-gree {
				color: #007AFF;
			}
			.icon-dingwei {
				float: right;
				color: #4cccd5;
				font-size: 44upx;
			}
			.address {
				flex: 1;
				color: #232323;
				font-size: 30upx;
			}
			.input-item-left {
				position: relative;
				width: 180upx;
				height: 100%;
				font-size: 32upx;
				font-weight: 500;
				text-align-last:justify;
				margin-right: 20upx;
			}
			.important::before{
				content: '*';
				color: #EC5F5F;
				font-size: 32upx;
				font-weight: bold;
				position: absolute;
				left: -30upx;
				top: calc(50% - 44upx);
			}
			input {
				flex: 1;
				height: 100%;
				font-size: 30upx;
				font-weight: 400;
			}
			.select {
				position: relative;
				flex: 1;
				select {
					width: 100%;
					height: 100%;
					color: #666;
					font-size: 30upx;
					font-weight: 400;
					border: none;
					outline: none;
					appearance: none;
					-webkit-appearance: none;
					-moz-appearance: none;
				}
				text {
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
		.big-input {
			position: relative;
			height: 140upx;
			padding: 30upx 50upx;
			border-bottom: 1px solid #e6e6e6;
			&:after {
				content: "*";
				color: #EC5F5F;
				font-size: 32upx;
				font-weight: bold;
				position: absolute;
				left: 20upx;
				top: 34upx;
			}
			textarea {
				width: 100%;
				height: 100%;
			}
		}
		.input-code {
			width: 190upx;
			height: 56upx;
			line-height: 60upx;
			color: #ffffff;
			text-align: center;
			background: #4cccd5;
			font-size: 20upx;
		}
	}
	.content-sub {
		.tip {
			color: #ED6969;
			font-size: 20upx;
			padding: 20upx 40upx;
		}
		.btn {
			width: 400upx;
			height: 80upx;
			margin: 40upx auto 100upx;
		}
	}
</style>
